<template>
  <div>
    <div class="heand">
      <div data-v-7793a11f="" class="ert">
        <h2 data-v-7793a11f="">
          <span data-v-7793a11f="" class="hbnh"
            ><a data-v-7793a11f="" class="fan" @click="$router.go(-1)"></a
          ></span>
          实名认证
          <a data-v-7793a11f="" class="xind" style="display: none;">新增</a
          ><a data-v-7793a11f="" class="shaux" style="display: none;"></a
          ><a data-v-7793a11f="" class="xind" style="display: none;"
            >交易记录</a
          >
        </h2>
      </div>
    </div>
    <ul class="verul">
      <li class="verli">
        <input v-if="showBtn" placeholder="请输入姓名" v-model="form.name" />
        <input
          placeholder="请输入姓名"
          v-model="form.name"
          v-if="!showBtn"
          readonly
        />
      </li>
      <li class="verli">
        <input
          placeholder="请输入身份证号码"
          v-model="form.idCard"
          v-if="showBtn"
        /><input
          placeholder="请输入身份证号码"
          v-model="form.idCard"
          v-if="!showBtn"
          readonly
        />
      </li>
    </ul>
    <div class="sfz">
      <div class="let">
        <h6>身份证正面</h6>
        <p>上传您的身份证正面</p>
      </div>
      <div class="rih">
        <el-upload
          :with-credentials="true"
          class="avatar-uploader"
          :action="admin + '/user/upload.do'"
          :class="form.img1key ? 'tou' : 'butou'"
          list-type="picture-card"
          name="upload_file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          :disabled="!showBtn"
          :headers="headers"
        >
          <img
            v-if="form.img1key"
            :src="form.img1key"
            class="id-img avatar"
            style="width: 100%;height: 100%;"
            v-show="form.img1key"
          />
          <i v-else class="iconfont icon-zhaopian"></i>
          <span v-if="!form.img1key && !imgStatus" class="btn-title">{{
            $t("hj197")
          }}</span>
          <span v-if="imgStatus" class="btn-title">{{ $t("hj198") }}</span>
        </el-upload>
      </div>
    </div>
    <div class="sfz">
      <div class="let">
        <h6>身份证反面</h6>
        <p>上传您的身份证反面</p>
      </div>
      <div class="rih fanmian">
        <!-- <img  :src="imgUrl1" v-show="imgUrl1">
                <input
                     accept="image/*" type="file" class="inp"> -->

        <el-upload
          :with-credentials="true"
          class="avatar-uploader"
          :action="admin + '/user/upload.do'"
          :class="form.img2key ? 'tou' : 'butou'"
          list-type="picture-card"
          name="upload_file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :on-error="handleError2"
          :before-upload="beforeAvatarUpload2"
          :disabled="!showBtn"
          :headers="headers"
        >
          <img
            v-if="form.img2key"
            :src="form.img2key"
            class="id-img avatar"
            style="width: 100%;height: 100%;"
          />
          <i v-else class="iconfont icon-zhaopian"></i>
          <span v-if="!form.img2key && !imgStatus2" class="btn-title">{{
            $t("hj199")
          }}</span>
          <span v-if="imgStatus2" class="btn-title">{{ $t("hj198") }}</span>
        </el-upload>
      </div>
    </div>
    <div class="enter" @click="toSure" v-if="showBtn">提交</div>
  </div>
</template>
<script>
import APIUrl from "@/axios/api.url";
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, idCardReg, isName } from "@/utils/utils";
import { compress } from "@/utils/imgupload";
export default {
  data() {
    return {
      imgUrl: "",
      imgUrl1: "",
      form: {
        phone: "",
        name: "",
        idCard: "",
        img1key: "",
        img2key: "",
        img3key: ""
      },
      img1Key: "",
      img2Key: "",
      img3Key: "",
      showBtn: true,
      admin: APIUrl.baseURL,
      headers: {
        USERTOKEN: localStorage.getItem("USERTOKEN")
      },
      imgStatus: false,
      imgStatus2: false,
      messFlag: this.$store.state.userInfo.isActive == 3 ? true : false
    };
  },
  mounted() {
    this.getUserInfo();
    //     if (this.$state.theme == "red") {
    //   document.body.classList.remove("black-bg");
    //   document.body.classList.add("red-bg");
    // }
    // this.admin = process.env.API_HOST;

    // //修改getElementsByName('upload_file')的透明度
    // var upload_file = document.getElementsByName('upload_file');
    // for (var i = 0; i < upload_file.length; i++) {
    //   upload_file[i].style.opacity = 0;
    // }
    // if (this.admin == undefined) {
    //   this.admin = "http://143.92.58.242:8091";
    // }
  },
  methods: {
    //图片上传
    // async handleChange(e) {
    // this.imgname = e.target.files[0].name.split(".")[0];
    // const files = e.target.files;
    // const data = new FormData();
    // data.append("file", files[0]);
    // let res = await api.uploadimg(data);
    // if (res.status == 200) {
    //     this.imgUrl = APIUrl.url + res.data;
    // }
    // console.log(this.imgUrl)
    // },
    handleAvatarSuccess(res, file) {
      this.imgStatus = false;
      this.form.img1key = res.data.url;
    },
    beforeAvatarUpload(file) {
      this.imgStatus = true;
    },
    handleError() {
      this.imgStatus = false;
    },
    handleAvatarSuccess2(res, file) {
      this.imgStatus2 = false;
      this.form.img2key = res.data.url; // URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload2(file) {
      this.imgStatus2 = true;
      // const _that = this
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error(this.$t("hj205"));
        return false;
      } else {
        this.form.img2key = URL.createObjectURL(file);
        compress(file, function(val) {});
      }
    },
    handleError2() {
      this.imgStatus2 = false;
    },
    handleAvatarSuccess3(res, file) {
      this.form.img3key = res.data.url; // URL.createObjectURL(file.raw);
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.commit("dialogVisible", false);
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
        if (
          this.$store.state.userInfo.isActive === 1 ||
          this.$store.state.userInfo.isActive === 2
        ) {
          this.form.idCard = this.$store.state.userInfo.idCard;
          this.form.name = this.$store.state.userInfo.realName;
          this.form.img1key = this.$store.state.userInfo.img1Key;
          this.form.img2key = this.$store.state.userInfo.img2Key;
          //   this.form.img3key = this.$store.state.userInfo.img3Key
          this.showBtn = false;
        }
      } else {
        //this.$store.commit('dialogVisible',true);
        //跳转到login
        this.$router.push({ path: "/login" });
      }
    },
    beforeAvatarUpload3(file) {},
    // 上传
    handleFile: function(e) {
      // var that = this
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      // if(file.size > 1024 * 1024 *20){
      console.log(file, "file");
      let i = false;
      if (i) {
        Toast(this.$t("hj206"));
      } else {
        // Indicator.open('Loading...')
        this.img1Key = file;
        // this.$refs.formDate.submit()
        // this.uploadIdImg({upload_file:file})
        var reader = new FileReader();
        reader.onload = data => {
          let res = data.target || data.srcElement;
          this.form.img1Key = res.result;
          // Indicator.close()
        };
        // reader.onloadend = () => {
        //   Indicator.close()
        // }
        reader.readAsDataURL(file);
      }
    },
    toSure() {
      // 实名认证弹框
      if (isNull(this.form.name) || !isName(this.form.name)) {
        Toast(this.$t("hj207"));
      } else if (isNull(this.form.idCard) || !idCardReg(this.form.idCard)) {
        Toast(this.$t("hj208"));
      } else if (isNull(this.form.img1key) || isNull(this.form.img2key)) {
        Toast(this.$t("hj209"));
      } else {
        // 显示确认弹窗
        this.toAuthentication();
      }
    },
    async toAuthentication() {
      let opts = {
        realName: this.form.name,
        idCard: this.form.idCard,
        img1key: this.form.img1key,
        img2key: this.form.img2key,
        img3key: this.form.img3key
      };
      let data = await api.userAuth(opts);
      if (data.status === 0) {
        Toast(this.$t("hj210"));
        this.goBack();
      } else {
        Toast(data.msg);
      }
    },
    goBack() {
      this.$router.back(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.avatar-uploader {
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload__input {
  opacity: 0 !important;
}
.heand {
  width: 100%;
  height: 6.141rem;
  background: url(~@/assets/imgRed/beij.cb205259.png) no-repeat 50%;
  background-size: 100%;
}

.ert {
  position: relative;
}

h2 {
  text-align: center;
  height: 1.2549rem;
  width: 100%;
  position: relative;
  line-height: 1.2549rem;
  font-size: 0.4806rem;
  color: #fff;
  background: transparent;
  font-weight: 500;
  z-index: 3;
}

.hbnh {
  position: absolute;
  left: 0.4005rem;
  font-size: 0.4272rem;
  font-weight: 500;
}

.hbnh .fan {
  width: 0.2403rem;
  height: 0.4272rem;
  background: url()
    no-repeat 50%;
  background-size: 100%;
  display: inline-block;
  margin-right: 0.1335rem;
  vertical-align: middle;
  margin-top: -0.0534rem;
}

.verul {
  width: 100%;
  min-height: 2.136rem;
  margin: 0 auto;
  margin-top: -1.8156rem;
  background: #fff;
  padding-top: 0.801rem;
  border-radius: 0.4005rem 0.4005rem 0 0;
}

.verul .verli {
  width: 9.345rem;
  height: 1.1748rem;
  background: #e6e6e6;
  border-radius: 0.1335rem;
  margin: 0 auto;
  margin-bottom: 0.4005rem;
}

.verli input {
  width: 7.476rem;
  height: 1.1748rem;
  background: transparent;
  font-size: 0.4005rem;
  margin-left: 0.4005rem;
  color: #000;
}

.sfz {
  width: 9.2115rem;
  background: #e6e6e6;
  margin: 0 auto;
  margin-top: 0.4539rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-radius: 0.1602rem;
}

.sfz .let {
  width: 4.1652rem;
  text-align: center;
}

.sfz .let h6 {
  font-size: 0.4005rem;
  font-weight: 500;
  color: #000;
  margin-top: 0.9612rem;
}

.let p {
  font-size: 0.267rem;
  font-weight: 500;
  color: #333;
  opacity: 0.5;
  margin-top: 0.4005rem;
}

.sfz .rih {
  width: 4.1652rem;
  height: 2.6967rem;
  background: url(~@/assets/imgRed/sfzz.0e35404d.png) no-repeat 50%;
  background-size: 100%;
  margin-right: 0.2937rem;
  margin-top: 0.3471rem;
  margin-bottom: 0.3471rem;
  position: relative;
}

.sfz .rih .inp {
  opacity: 0;
}

.sfz .rih .inp,
.sfz .rih img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.rih .inp,
.sfz .rih img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.enter {
  width: 9.345rem;
  height: 1.1748rem;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
  border-radius: 0.1335rem;
  text-align: center;
  color: #fff;
  font-size: 0.4272rem;
  line-height: 1.1748rem;
  margin: 0.801rem auto;
}

input::-webkit-input-placeholder {
  color: #999;
}
.tou {
  opacity: 1;
}
.butou {
  opacity: 0;
}
</style>
